<script>
  export default {
    name: 'assign-store-flow-dialog',
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 商店对象
        store: {
          // 名称
          name: '',
          // 所属用户
          userName: ''
        },
        // 商店分单记录列表
        assignStoreFlowList: [],
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
      }
    },
    methods: {
      /**
       * 初始化查看商店分单记录弹出框方法
       * @param store
       */
      initAssignStoreFlowDialog(store) {
        this.store.name = store.name;
        this.store.userName = store.userName;

        this.getAssignStoreFlowList(store.id);
        // 打开弹出框
        this.visible = true;
      },
      /**
       * 获取商店分单记录列表方法
       * @param {string} id 主键
       */
      getAssignStoreFlowList(id) {
        this.dataLoad = true;
        this.$axios.$get('/assign-store/flow/list', { params: { masterId: id }})
          .then(({ data }) => {
            this.assignStoreFlowList = data;
          })
          .catch(() => {})
          .finally(() => {
            this.dataLoad = false;
          });
      },
      /**
       * 关闭弹出框事件
       */
      closeDialogHandle() {
        this.store = {
          name: '',
          userName: ''
        };
        this.assignStoreFlowList = [];

        this.$nextTick(() => {
          this.visible = false;
        })
      }
    }
  }
</script>

<template>
  <el-dialog
    title="商店审核分单记录"
    :visible.sync="visible"
    width="55%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
    class="assign-store-flow-dialog"
  >
    <el-form inline size="mini">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="商店名称" class="">
              <el-input v-model="store.name" readonly class=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属用户">
            <el-input v-model="store.userName" readonly class=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="dataLoad"
      element-loading-text="商店分单记录列表加载中..."
      element-loading-spinner="el-icon-loading"
      max-height="400"
      :data="assignStoreFlowList"
      ref="assignStoreFlowTable"
    >
      <el-table-column prop="submitTypeName" header-align="center" align="center" label="提交类型"></el-table-column>
      <el-table-column prop="assignTypeName" header-align="center" align="center" label="分单方式"></el-table-column>
      <el-table-column prop="auditUserName" header-align="center" align="center" label="审核员"></el-table-column>
      <el-table-column prop="assignTime" header-align="center" align="center" label="分单时间"></el-table-column>
      <el-table-column prop="createUserName" header-align="center" align="center" label="分单人"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped>
  .assign-store-flow-dialog >>> .el-dialog__body {
    padding: 20px 20px;
  }
  .assign-store-flow-dialog .width90percent {
    width: 90%;
  }
</style>
